<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="page">
    <button data-path="/">首页</button>
    <button data-path="/news">新闻</button>
    <button data-path="/list">列表</button>
</div>
<div class="detail"></div>
<script>
    const router = [
        {path:'/',component:'首页',detail:'这是首页信息'},
        {path:'/news',component:'新闻',detail:'这是新闻信息'},
        {path:'/list',component:'列表',detail:'这是列表信息'}
    ];
    const btns = document.querySelectorAll('.page button');
    const detail = document.querySelector('.detail');
    btns.forEach(btn=>{
        btn.addEventListener('click',function(){
            location.hash = this.dataset.path
        })
    })
    window.onhashchange = function (e){
        const target = e.newURL.split('#')[1]
        router.forEach(item=>{
            if(item.path===target){
                detail.innerHTML = item.detail
            }
        })
    }
</script>
</body>
</html>